<script setup lang="ts">
interface Props {
  color?: 'yellow' | 'blue'
}

const props = withDefaults(defineProps<Props>(), {
  color: 'blue'
})
const yellowStyle = {
  backgroundImage: `linear-gradient(90deg, #fce349, #faf75d)`,
  color: `#58350f`,
  boxShadow: `0 2px 1px 0 #f5ef51`

}
const blueStyle = {}
const displayStyle = ref(blueStyle)
onMounted(() => {
  switch (props.color) {
    case "blue":
      displayStyle.value = blueStyle
      break;
    case "yellow":
      displayStyle.value = yellowStyle
      break;
    default:
      displayStyle.value = blueStyle
  }
})
</script>
<template>
  <a class="button" :style="displayStyle">
    <slot/>
  </a>
</template>
<style scoped lang="scss">
.button {
  display: inline-block;
  background-image: linear-gradient(90deg, #48c6fd, #42bffe);
  padding: 0.4em 0.6em 0.3em;
  border-radius: 0.4em 0 0.3em 0;
  box-shadow: 0 1px 1px 0 #40e3ff;
  font-size: 1.2rem;
  opacity: 0.9;
  font-weight: bold;
  transform: translate(0, 0);
  transition: all 0.2s;
  white-space: nowrap;
  overflow: hidden;


  &:hover {
    opacity: 1;
  }
}
</style>